<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-row :gutter="20" style="height: 95vh;">
            <el-col :span="6" style="height: 100%;overflow-y: scroll;">
                <el-input placeholder="输入关键字进行过滤" v-model="keyword">
                </el-input>

                <el-tree :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode"
                    @node-click="handleNodeClick" ref="tree"></el-tree>
            </el-col>
            <el-col :span="18" style="height: 100%;">
                <el-row style="height: 100%;width: 100%;" v-loading="loading">
                    <iframe ref="iframe" id="ifm" :src="url" frameborder="0" style="height: 100%;width: 100%;"></iframe>
                </el-row>
            </el-col>
        </el-row>
        <div v-if="!isLoad">数据加载中。。。</div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 修改样式 -->
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.js"></script>

<script>
    function initVue() {
        let option = {
            data() {
                return {
                    isLoad: true,
                    loading: true,
                    keyword: "",
                    current: "",
                    baseUrl: "./classes/class_$.html",
                    data: [],
                    defaultProps: {
                        children: 'children',
                        label: 'id'
                    }
                };
            },
            computed: {
                url() {
                    if (this.current) {
                        return this.baseUrl.replace("$", this.current.toLocaleLowerCase());
                    } else {
                        return "./classes/index.html";
                    }
                }
            },
            watch: {
                keyword(val) {
                    this.current = "";
                    this.$refs.tree.filter(val);
                }
            },
            created() {
                fetch("./keys/ele-tree.json")
                    .then(response => response.json())
                    .then(data => {
                        this.data = data;
                        this.isLoad = false;
                    });

            },
            mounted() {
                const that = this;
                $("#ifm").on("load", function () {
                    that.stateChange();
                });
            },
            methods: {
                filterNode(value, data) {
                    if (!value) return true;
                    return data.id.toLocaleLowerCase()
                        .indexOf(value.toLocaleLowerCase()) !== -1;
                },
                handleNodeClick(data) {
                    if (this.current !== data.id) {
                        this.current = data.id;
                        this.loading = true;
                    }
                },
                stateChange() {
                    this.loading = false;
                },
            }
        };

        new Vue({
            el: '#app',
            ...option
        })
    }

    initVue();


</script>

</html>